Structure de base

La structure de base écrite ci-dessous est le minimum requis pour débuter une page HTML.

Disséquons ensemble ces différentes parties :

Doctype

Le premier élément sera toujours : <!DOCTYPE html> Cette balise va informer notre navigateur que ce document est rédigé en HTML5. Il saura alors le décrypter et l’afficher correctement.

<!DOCTYPE html>

Balise HTML

La balise <html> représente la racine d'un document HTML. Tout autre élément du document doit être un descendant de cette balise, l'entier de notre structure sera donc toujours englober dans cet élément.

<!DOCTYPE html>
<html>
</html>

L’ouverture de la balise <html> sera toujours suivi de l’ouverture du HEAD. Le contenu de l'en-tête HTML <head> n'est pas affiché dans la page du navigateur. On pourrait comparé le HEAD au cerveau de l'humain, elles contient toutes les connexions invisible et non transmise "physiquement" du document. Le travail de la balise <head> est de contenir les métadonnées à propos du document. On y trouvera entre autres : les données pour google analytics, le track facebook, les données pour le partages sur les réseaux sociaux, etc...

<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

Le minimum requis dans la balise <head> sont :

1. <title>

Cette balise contiendra en principe le nom du site et il est essentiel au référencement : <title> Nom du site </title>
C'est le seul élément contenu dans head qui est visible dans l'onglet du navigateur : balise-title

2. <meta charset>

La première balise META : <meta charset="UTF-8"> va définir l’encodage du site. L’encodage va dire au navigateur quel type de caractère il va devoir afficher. Le plus courant et le plus commun sera : l’ UTF-8.

Voici un exemple concret pour mieux comprendre : site mal encodé. On peut voir sur ce lien que le meta charset est paramétré à : ISO-8859-1 et c'est pourquoi il nous affiche '�' à la place des accents aigü.

<head>
    <meta charset="UTF-8">
    <title>Titre de la page</title>
</head>

Contenu de la page

Et finalement, on aura le <body>, qui équivaut au corps du document, c'est à dire, tout ce qui sera visible à l'utilisateur.
C'est ici que sera contenu l'entier des informations transmise à l'utilisateur comme les titres, les descriptions, les articles, les images, etc...
Cette balise sera placé juste après la fermeture du </head>

Ci-dessous, la structure de base du document :

<head>
</head>
<body>
    <!-- Contenu du site et visible à l'utilisateur -->
</body>

Structure complète

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre de la page</title>
    </head>
    <body>
        <!-- Contenu du site -->
    </body>
</html>

Table of Contents